<template>
  <div class="app">
    <div class="container" :style="{ transform: `scale(${scale})` }">
      <header class="header">
        <h1 class="header-title">数据大屏实时展示</h1>
        <div class="header-time">当前时间: {{ time }}</div>
      </header>
      <div class="main">
        <div class="left"><Left /></div>
        <div class="center"><Center /></div>
        <div class="right"><Right /></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onBeforeUnmount, ref } from "vue";
import dayjs from "dayjs";
import Left from "./views/left/index.vue";
import Center from "./views/center/index.vue";
import Right from "./views/right/index.vue";

const time = ref(dayjs().format("YYYY年MM月DD日 HH时mm分ss秒"));
let timeId: NodeJS.Timeout;

onMounted(() => {
  timeId = setInterval(() => {
    time.value = dayjs().format("YYYY年MM月DD日 HH时mm分ss秒");
  }, 1000);
});

onBeforeUnmount(() => {
  clearInterval(timeId);
});

const scale = ref(1);

const resize = () => {
  /*
    比较当前屏幕和设计稿的宽高比
      如果当前屏幕宽高比大于设计稿的宽高比，说明当前屏幕宽度更宽，需要使用高度计算宽高比
      如果当前屏幕宽高比小于设计稿的宽高比，说明当前屏幕高度更高，需要使用宽度计算宽高比
  */

  // 设计稿宽高
  const draftWidth = 1366;
  const draftHeight = 611;
  // 当前屏幕的宽高
  const clientWidth = document.body.clientWidth;
  const clientHeight = document.body.clientHeight;

  if (clientWidth / clientHeight > draftWidth / draftHeight) {
    scale.value = clientHeight / draftHeight;
  } else {
    scale.value = clientWidth / draftWidth;
  }
};

onMounted(() => {
  resize();
  window.addEventListener("resize", resize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
});
</script>

<style scoped lang="scss">
.app {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $bg-color;
}
.container {
  height: 611px;
  width: 1366px;
  // overflow: hidden;
}

.header {
  height: 60px;
  background-image: url("./assets/head_bg.png");
  background-size: 100% 120%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.header-title {
  margin: 0;
  color: $white-color-1;
  font-size: 24px;
}

.header-time {
  position: absolute;
  right: 10px;
  top: 16px;
  color: $white-color-2;
  font-size: 13px;
}

.main {
  height: 551px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

// 1366 - 20
.left,
.right {
  width: 360px;
  height: 100%;
}

.center {
  width: 600px;
  height: 100%;
}
</style>
